<template>
  <!-- 导航栏 搜索框 -->
  <van-search
    show-action
    v-model="input_value"
    shape="round"
    background="#4fc08d"
    placeholder="请输入关键词"
  >
    <template #left>
      <van-icon name="arrow-left" size="18" @click="GoHome" />
    </template>
    <template #action class="rightBtn">
      <van-button plain type="primary" size="mini" @click="searchBtn">搜索</van-button>
    </template>
  </van-search>
  <div class="box">
    <!-- 商品列表 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="哥，还没挑好呢？这回真的没了！"
      @load="onLoad"
    >
      <van-row justify="center">
        <van-col span="12" v-for="(item, index) in loadList" :key="item.proid">
          <img :src="item.img1" alt="" />
          <p class="van-ellipsis">商品名：{{ item.proname }}</p>
          <p>价格：{{ ((item.originprice * 8) / 10).toFixed(2) }}</p>
        </van-col>
      </van-row>
    </van-list>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import http from "@/utils/http.js";
import { useRouter } from "vue-router";
const router = useRouter();

let input_value = ref("");
// 渲染数据
let loading = false;
let finished = false;
let Count = ref(0);
let flag = ref(0);
const loadList = ref([]);

function GoHome() {
  router.push("/");
}
function searchBtn() {
  http
    .request({
      url: "pro/search",
      method: "GET",
      params: {
        count: Count.value,
        limitNum: 10,
        keyword: input_value.value
      }
    })
    .then((res) => {
      if (res.data.code == 1002) {
        console.log(res.data.message);
      } else {
        console.log(res);
        loadList.value.splice(0).push(...res.data.data);
      }
    });
}
function onLoad() {
  if (flag == 0) {
    finished = true;
  } else {
    Count.value++;
    http
      .request({
        url: "pro/search",
        method: "GET",
        params: {
          count: Count.value,
          limitNum: 10,
          keyword: input_value.value
        }
      })
      .then((res) => {
        console.log(res);
        flag.value = res.data.data.length;
        loadList.value.push(...res.data.data);
        loading = true;
        console.log("加载");
      });
  }
}
</script>
<style lang="css" scoped>
.van-search > :deep(.van-badge__wrapper) {
  margin-right: 5px;
}
.van-search > :deep(.van-search__action) {
  display: flex;
}
img {
  width: 100%;
}
.box {
  height: calc(100vh - 105px);
  overflow: auto;
}
</style>
